// SPDX-License-Identifier: MIT

@use "../settings/config" as cfg;

$color-bg: -color-bg-default !default;
$color-fg: -color-fg-default !default;
$color-border: -color-border-default !default;

$color-bg-focused: -color-bg-default !default;
$color-border-focused: -color-accent-emphasis !default;

$color-bg-readonly:  -color-bg-subtle  !default;
$color-bg-highlight: -color-accent-subtle !default;
$color-fg-highlight: -color-fg-default !default;

$color-bg-success: -color-bg-default !default;
$color-fg-success: -color-success-fg !default;
$color-border-success: -color-success-emphasis !default;

$color-bg-danger: -color-bg-default !default;
$color-fg-danger: -color-danger-fg !default;
$color-border-danger: -color-danger-emphasis !default;

// not exposed as looked-up color variables
$color-fg-placeholder: -color-fg-subtle !default;
$color-fg-password: -color-fg-muted !default;

.text-input {

  -color-input-bg: $color-bg;
  -color-input-fg: $color-fg;
  -color-input-border: $color-border;

  -color-input-bg-focused: $color-bg-focused;
  -color-input-border-focused: $color-border-focused;

  -color-input-bg-readonly:  $color-bg-readonly;
  -color-input-bg-highlight: $color-bg-highlight;
  -color-input-fg-highlight: $color-fg-highlight;

  -fx-background-color: -color-input-border, -color-input-bg;
  -fx-background-insets: 0, cfg.$border-width;
  -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
  -fx-text-fill: -color-input-fg;

  -fx-highlight-fill: -color-input-bg-highlight;
  -fx-highlight-text-fill: -color-input-fg-highlight;
  -fx-prompt-text-fill: $color-fg-placeholder;

  -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
  -fx-cursor: text;

  &:focused {
    -fx-background-color: -color-input-border-focused, -color-input-bg-focused;
    -fx-prompt-text-fill: transparent;
  }

  &:disabled {
    -fx-opacity: cfg.$opacity-disabled;

    // prevent opacity being applied twice
    &>.scroll-pane {
      -fx-opacity: 1.0;
    }
  }

  &:success {
    -color-input-bg: $color-bg-success;
    -color-input-fg: $color-fg-success;
    -color-input-border: $color-border-success;
    -color-input-border-focused: $color-border-success;
  }

  &:danger {
    -color-input-bg: $color-bg-danger;
    -color-input-fg: $color-fg-danger;
    -color-input-border: $color-border-danger;
    -color-input-border-focused: $color-border-danger;
  }

  &:readonly {
    -fx-background-color: -color-input-border, -color-input-bg-readonly;
  }

  &:readonly:focused {
    -fx-background-color: -color-input-border-focused, -color-input-bg-readonly;
  }

  &.edge-to-edge {
    -fx-background-color: -color-input-bg;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
  }

  // input group
  &.left-pill {
    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
    -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width;

    &:focused {
      -fx-background-insets: 0, cfg.$border-width;
    }
  }

  &.center-pill {
    -fx-background-radius: 0;
    -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width 0;

    &:focused {
      -fx-background-insets: 0, cfg.$border-width;
    }
  }

  &.right-pill {
    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
    -fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0;

    &:focused {
      -fx-background-insets: 0, cfg.$border-width;
    }
  }

  .context-menu {
    // prevent context menu from inheriting text inputs font properties
    -fx-font-size: cfg.$font-default;
    -fx-font-weight: normal;

    .menu-item {
      // There's some #javafx-bug here. Setting this e.g. to 'hand' works as expected
      // but 'default' changes nothing and cursor still has the 'text' shape.
      -fx-cursor: default;
    }
  }
}

.text-field {
  &.small {
    -fx-padding: cfg.$padding-y-small cfg.$padding-x-small cfg.$padding-y-small cfg.$padding-x-small;
    -fx-font-size: cfg.$font-small;
  }

  &.large {
    -fx-padding: cfg.$padding-y-large cfg.$padding-x-large cfg.$padding-y-large cfg.$padding-x-large;
    -fx-font-size: cfg.$font-title-4;
  }

  &.rounded {
    -fx-background-radius: 10em;
  }
}

.text-area {
  // scroll pane offset to avoid overlapping input borders
  -fx-padding: 2px;
  -fx-cursor: default;

  .content {
    -fx-cursor: text;
    -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
  }
}

.password-field {
  -fx-text-fill: $color-fg-password;
}
